<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../js/axios.min.js" type="text/javascript"></script>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>查看教练</title>
</head>
<body>
<div id="app">
    <el-container>
        <!--顶栏-->
        <el-header>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1"><a href="userHome.html">个人中心</a></el-menu-item>
                <el-menu-item index="2"><a href="venueSearch.html">所有场馆</a></el-menu-item>
                <el-menu-item index="3"><a href="coachSearch.html">所有教练</a></el-menu-item>
                <el-menu-item index="4"><a href="article.html">论坛</a></el-menu-item>
            </el-menu>
            <div class="line"></div>
        </el-header>
<!--        <el-header>-->
<!--            <el-breadcrumb separator="">-->
<!--                <el-breadcrumb-item :to="{ path: './homePage.html' }">首页</el-breadcrumb-item>-->
<!--                <el-breadcrumb-item><a href="./accountCenter.html">个人中心</a></el-breadcrumb-item>-->
<!--                <el-breadcrumb-item><a href="./coachSearch.html">查看教练</a></el-breadcrumb-item>-->
<!--                <el-breadcrumb-item><a href="./venueSearch.html">查看场馆</a></el-breadcrumb-item>-->
<!--            </el-breadcrumb>-->
<!--        </el-header>-->
        <el-main>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="教练姓名">
                    <el-input v-model="formInline.condition" placeholder="关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="coach" border>
                <el-table-column>
                    <div class="block">
                        <el-avatar shape="square" :size="100" :fit="fit" :src="coach.image"></el-avatar>
                    </div>
                </el-table-column>
                <el-table-column prop="nickname" label="名称">
                </el-table-column>
                <el-table-column prop="style" label="流派">
                </el-table-column>
                <el-table-column prop="venueName" label="所属场馆">
                </el-table-column>
                <el-table-column prop="gender" label="性别">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showCheck(scope.row)" type="text" size="small">查看</el-button>
                        <el-button @click="sign(scope.row)" type="text" size="small">签约</el-button>
                        <!--<el-button @click="signAndApply(scope.row)" type="text" size="small">签约并预约</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[2, 3]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalRow">
                </el-pagination>
            </div>
        </el-main>
    </el-container>
    <el-dialog
            title="查看教练详情"
            :visible.sync="dialogVisible"
            width="30%">
        <span>{{check.realname}}</span><br>
        <span>性别：{{check.gender}}</span>&nbsp;&nbsp;<span>{{check.age}}岁</span><br>
        <span>个人介绍：{{check.introduce}}</span><br>
        <span>课时费：{{check.price}}</span><br>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
            title="选择预约时间"
            :visible.sync="timeDialogVisible"
            width="30%">
        <div class="block">
            <el-row>
                <el-date-picker
                        @change="checkDate"
                        v-model="formInline.day"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </el-row>
        </div>
        <el-row>
            <el-radio v-show="checkState" v-model="radio" label="10:00">10:00</el-radio>
            <el-radio v-show="checkState" v-model="radio" label="11:00">11:00</el-radio>
            <el-radio v-show="checkState" v-model="radio" label="14:00">14:00</el-radio>
        </el-row>
        <el-row>
            <el-radio v-show="checkState" v-model="radio" label="15:00">15:00</el-radio>
            <el-radio v-show="checkState" v-model="radio" label="16:00">16:00</el-radio>
            <el-radio v-show="checkState" v-model="radio" label="17:00">17:00</el-radio>
        </el-row>
        <el-row>
            <el-radio v-show="checkState" v-model="radio" label="19:00">19:00</el-radio>
            <el-radio v-show="checkState" v-model="radio" label="20:00">20:00</el-radio>
            <el-radio v-show="checkState" v-model="radio" label="21:00">21:00</el-radio>
        </el-row>
        <span slot="footer" class="dialog-footer">
    <el-button @click="timeDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="notify()">确 定</el-button>
  </span>
    </el-dialog>
    <!--预约界面-->
    <el-drawer title="预约教练" :visible.sync="drawer" :direction="rtl">
        <template slot-scope="scope">
            <el-row>
                <el-col :offset="6">
                    <div style="margin: 20px;"></div>
                    <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                        <el-form-item label="选择日期">
                            <el-date-picker v-model="bookTime.date" type="date" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="选择时间">
                            <el-select v-model="bookTime.time" placeholder="选择时间">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small" @click="checkTime()">确定预约</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </template>
    </el-drawer>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                timeForm: [],
                coach: [],
                dialogVisible: false,
                timeDialogVisible: false,
                formInline: {
                    day: "",
                    time: "",
                    condition: "",
                    state: "",
                    current: 1,
                    size: 4
                },
                check: {},
                radio: "",
                coachId: "",
                currentPage: 1,// 当前页
                size: 4,// 每页多少条
                totalRow: 1,// 总条目数
                drawer: false,// 抽屉状态
                direction: 'rtl',// 抽屉从右向左打开
                oneCoach: {},//一条教练的信息
                bookTime:{
                    coachId:"",
                    date:"",
                    time:""
                },
                options: [
                    {value: '08:00:00', label: '08:00-09:00'},
                    {value: '09:00:00', label: '09:00-10:00'},
                    {value: '10:00:00', label: '10:00-11:00'},
                    {value: '11:00:00', label: '11:00-12:00'},
                    {value: '14:00:00', label: '14:00-15:00'},
                    {value: '15:00:00', label: '15:00-16:00'},
                    {value: '16:00:00', label: '16:00-17:00'},
                    {value: '17:00:00', label: '17:00-18:00'}
                ],
                labelPosition: "top"
            }
        },
        methods: {
            // 分页
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.size = val
                this.getAll()
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage = val
                this.getAll()
            },
            checkState() {
                for (let i = 0; i < this.timeForm; i++) {
                    if (this.timeForm[i].lessonTime == this.value) {
                        return false;
                    }
                }
                return true;
            },
            notify() {
                axios.post("/book/apply", {
                    params: {
                        coachId: this.coachId,
                        createTime: this.formInline.day,
                        lessonTime: this.radio
                    }
                }).then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        alert("成功")
                        this.timeDialogVisible = false;
                    }
                })
            },
            apply(row) {
                console.log(row);
                this.coachId = row.coachId;
                this.timeDialogVisible = true;
            },
            showCheck(row) {
                console.log(row);
                this.check = row;
                this.dialogVisible = true;
            },
            checkDate() {
                axios.get("/book/check?date=" + this.formInline.day).then(resp => {
                    this.timeForm = resp.data.data;
                    console.log(this.timeForm);
                })
            },
            query() {
                axios.get("/coach/query", {
                    params: {
                        condition: this.formInline.condition,
                        current: this.formInline.current,
                        size: this.formInline.size
                    }
                }).then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        this.coach = resp.data.data.records;
                    }
                })
            },
            // 获取所有教练
            getAll() {
                axios.get("/coach/findAll?page=" + this.currentPage + "&size=" + this.size).then(resp => {
                    if (resp.status === resp.data.code) {
                        // console.log(resp.data.data)
                        this.coach = resp.data.data.records
                        this.totalRow = resp.data.data.total
                    }
                })
            },
            // 签约教练
            sign(row) {
                this.drawer = true;
                this.oneCoach = row;
                this.coachId = row.coachId;
                // alert(this.coachId)
                axios.post("/sign/build", this.coachId).then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        alert("签约成功")
                    }
                })

            },
        },
        created() {
            this.getAll();
        }
    })
</script>
</body>
</html>